<template>
	<div class="search-wrap" >
		<div 
		:style='"background:url("+searchBg+") no-repeat center"'
		class="search-box" >
			<img @click="handleToBack" class="search-left-arrow" :src="searchLeftArrow" alt="">
			
			<div class="search-input" >
				<van-search
				  v-model="searchValue"
				  autofocus
				  :clearable="false"
				  placeholder="请输入商品或者分类"
				  @search="onSearch"
				  :left-icon="searchHistoryIcon"
				>
				</van-search>
				
				<div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
			</div>
		</div>
		
		<div class="history-list" >
			<div class="history-top" >
				<div class="history-title" >历史搜索</div>
				<img v-if="localStorageHistory.length" @click="handleToDel" class="history-del" :src="searchHistoryDel" alt="">
			</div>
			
			<div v-if="!localStorageHistory.length" class="empty-title" >
				您暂时还没有任何的搜索记录
			</div>
			
			<div  v-else class="history-ul" >
				<div
				v-for="(item, index) in localStorageHistory"
				:key="index"
				class="history-li"
				@click="handleToGoodSearch(item)"
				>
					{{ item }}
				</div>
			</div>
		</div>
		
		
		<van-popup v-model="showModel" round >
			<div class="popup-box" >
				<div class="popup-box-title" >是否删除所有记录？</div>
				<div class="popup-btn" >
					<div @click="showModel = false" class="popup-btn-cancel active-btn" >取消</div>
					<div @click="handleToClear" class="popup-btn-confirm active-btn" >确定</div>
				</div>
			</div>
		</van-popup>
		
	</div>
</template>

<script>
	import { searchLeftArrow, searchBg, searchHistoryIcon, searchHistoryDel } from '@/tool/static-img';
	export default {
		data() {
			return {
				searchLeftArrow, searchBg, searchHistoryIcon, searchHistoryDel,
				searchValue: '',
				// 本地历史记录
				localStorageHistory: [],
				showModel: false
			}
		},
		created() {
			// 本地历史记录
			let searchHistory = localStorage.getItem('searchHistory');
			if(searchHistory) {
				this.localStorageHistory = JSON.parse(searchHistory);
			}else {
				this.localStorageHistory = [];
			}
		},
		methods: {
			handleToBack() {
				this.$router.back()
			},
			// 关键词去搜索
			onSearch(val) {
				// 搜索词记录
				localStorage.setItem('searchKey', val.trim() || '')
				
				if(!val.trim()) {
					this.toGoodList();
					return;
				}
				
				// 去重
				this.localStorageHistory = this.localStorageHistory.filter(item => {
					return item != val;
				})
				
				
				this.localStorageHistory.unshift(val);
				this.localStorageHistory = this.localStorageHistory.slice(0, 20);
				
				localStorage.setItem('searchHistory', JSON.stringify(this.localStorageHistory));
				
				this.toGoodList();
			},
			// 去搜索
			handleToSearch() {
				
				this.onSearch(this.searchValue);
			},
			// 去删除
			handleToDel() {
				this.showModel = true;
			},
			handleToClear() {
				this.localStorageHistory = [];
				localStorage.removeItem('searchHistory');
				this.showModel = false;
			},
			// 历史记录
			handleToGoodSearch(val) {
				// 搜索词记录
				localStorage.setItem('searchKey', val.trim() || '');
				
				this.toGoodList()
			},
			// 跳转列表页
			toGoodList() {
				this.searchValue = '';
				
				
				this.$router.replace({
					name: 'goodList'
				})
			}
		}
		
	}
</script>

<style lang="scss" >
	.search-wrap{
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		.search-box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.88rem;
			background-size: cover!important;
			.search-left-arrow{
				width: 0.4rem;
				height: 0.4rem;
				padding: 0.24rem 0 0.24rem 0.32rem;
			}
			.search-input{
				position: relative;
				width: 6.22rem;
				margin-left: 0.24rem;
				.search-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.28rem;
					font-weight: 400;
					color: #fff;
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1.12rem;
					height: 0.52rem;
					border-radius: 0.3rem;
					background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
				}
				.van-search{
					padding: 0;
					background-color: transparent;
					.van-search__content{
						background-color: #fff;
						border-radius: 0.32rem;
						.van-cell{
							align-items: center;
							padding: 3px 3px 3px 0;
						}
					}
					.van-field__control{
						height: 26px;
						width: 3.6rem;
						line-height: 26px;
						font-weight: 400;
						font-size: 0.28rem;
					}
					.van-icon{
						height: 20px;
					}
					.van-icon__image{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		
		.history-list{
			padding: 0.32rem;
			.history-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 0.24rem;
				.history-title{
					height: 0.44rem;
					line-height: 0.44rem;
					font-weight: 500;
					font-size: 0.32rem;
					color: #333333;
				}
				.history-del{
					width: 0.36rem;
					height: 0.36rem;
					padding: 0.04rem 0;
				}
			}
			
			.empty-title{
				padding-top: 1rem;
				font-size: 0.28rem;
				color: #999999;
				text-align: center;
			}
			
			.history-ul{
				display: flex;
				flex-wrap: wrap;
				.history-li{
					height: 0.52rem;
					line-height: 0.52rem;
					font-size: 0.28rem;
					font-weight: 400;
					margin-bottom: 0.24rem;
					padding: 0 0.28rem;
					margin-right: 0.24rem;
					color: #666666;
					border-radius: 0.26rem;
					background-color: #f4f4f4;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}
			}
		}
		
		.popup-box{
			width: 5.74rem;
			height: 3.08rem;
			padding-top: 0.72rem;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0.16rem;
			.popup-box-title{
				height: 0.44rem;
				margin-bottom: 0.72rem;
				line-height: 0.44rem;
				font-size: 0.32rem;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.popup-btn{
				display: flex;
				justify-content: space-between;
				padding: 0 0.32rem;
				.popup-btn-cancel{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.4rem;
					height: 0.8rem;
					font-weight: 400;
					font-size: 0.32rem;
					color: #333333;
					border-radius: 0.4rem;
					border: 0.02rem solid #E3E3E3;
					box-sizing: border-box;
				}
				.popup-btn-confirm{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.4rem;
					height: 0.8rem;
					font-size: 0.32rem;
					font-weight: 400;
					color: #fff;
					background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
					border-radius: 0.4rem;
				}
			}
			
		}
		
		.van-popup--center.van-popup--round{
			border-radius: 0.16rem;
		}
	}
</style>